<template>
	<div class="leave">
		<div class="head">
			<h2>详情</h2>
			<h2 @click="goBack" style="cursor: pointer">返回</h2>
		</div>
		
		<div class="detailform">
			<el-form ref="myForm" :model="formData" class="form">
				  <el-form-item label="申 请 人:" prop="userName">
					  <p>{{formData.userName}}</p>
				  </el-form-item>
				  
				  <el-form-item label="请 假 类:" prop="typeName">
				  		<p>{{formData.typeName}}</p>
				  </el-form-item>
				  
				  <el-form-item label="请 假 时 间:">
					  <p class="qingjia">
						  <span>{{formData.startTime}}</span>
						  <span>-</span>
						  <span>{{formData.endTime}}</span>
					  </p>
				  </el-form-item>
				  
				  <el-form-item label="审 批 人:" prop="adminName">
				  		<p>{{formData.adminName}}</p>
				  </el-form-item>
				  
				  <el-form-item label="审 批 状 态:" prop="status">
						<p v-model="formData.status" v-if="formData.status == 0">待审批</p>
						<p v-model="formData.status" v-if="formData.status == 1">审批通过</p>
						<p v-model="formData.status" v-if="formData.status == 2">审批未通过</p>
				  </el-form-item>
				  
				  <el-form-item label="请 假 原 因:" prop="content">
					  <p>{{formData.content}}</p>
				  </el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
	export default {
	    data() {
	      return {
			  baseUrl:require("../js/baseUrl").baseUrl,
			  formData:{
				  userName:'',
				  typeId:'',
				  typeName:'',
				  adminName:'',
				  startTime:'',
				  endTime:'',
				  status:'',
				  content:'',
			  }
	      }
	    },
		methods:{
			goBack(){//返回上一级
				this.$router.go(-1)
			},
			Time(){
				this.formData.startTime=this.formData.startTime.substring(0,10)
				this.formData.endTime=this.formData.endTime.substring(0,10)
			},
			getDetails(){
				//接口	SchoolSys/uloa/selectOneById
				this.$http.post(this.baseUrl+"SchoolSys/uloa/selectOneById",{
					loaId:this.loaId,
				}).then(res=>{
					if(res.data.code==200){
						this.formData=res.data.data
						this.Time()
					}
				})
			}
		},
		mounted(){
			this.loaId=this.$route.query.loaId
			this.formData.username=sessionStorage.getItem("userName")
			this.formData.userId=sessionStorage.getItem("userId")
			this.getDetails()
		}
	}	
</script>

<style>
	.head{
		margin: 40px 20px 0 40px;
		display: flex;
		justify-content: space-between;
	}
	.head h2{
		font-size: 28px;
		color: #333;
	}
	.head a{
		font-size: 18px;
		color: #333;
		text-decoration: none;
		font-weight: bolder;
	}
	.btn2{
		width: 98px;
		height: 50px;
		color: #fff;
		font-size: 20px;
		border-radius: 4px;
	}
	
	.detailform .form{
		margin-top: 3%;
		display: flex;
		flex-wrap: wrap;
	}
	.detailform .form p{
		width: 370px;
		height: 40px;
		background-color: #fff;
		border: 1px solid #999;
		padding: 0 15px;
		
	}
	.detailform .el-form-item {
		width: 50%;
		display: flex;
		justify-content: space-evenly;
		margin-bottom: 25px;
	}
	.detailform .el-form-item__content {
		width: 400px;
	}
	.detailform .el-date-editor.el-input, .el-date-editor.el-input__inner {
		width: 400px;
	}
	.detailform .el-select {
		width: 400px;
	}
	.detailform .el-form-item__label {
		font-size: 19px;
		font-weight: bolder;
		text-align: left;
		width: 111px;
		color: #333;
	}
	
	.detailform .qingjia{
		width: 370px;
		height: 40px;
		background-color: #fff;
		border: 1px solid #DCDFE6;
		border-radius: 4px;
		padding: 0 15px;
	}
	.detailform .qingjia span{
		margin: 0 5px;
	}
</style>